<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>场景-高级-情境情绪应对</title>
  <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
  <script src='../../../../CommonTool/commonNetWork.js'></script>
  <script src="../../../../script/jquery.js"></script>
  <script src="../SituationalCoping.js"></script>
  <style>
    .ImgStyleOne{
      min-width:70%;
      max-width:70%;
      margin:0 auto;
      height:45vw;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .downBody{ margin-top:1%; }

    /* 按钮样式：单独一行放在图片下方，不覆盖图片容器 */
    .story-controls{
      text-align:center;
      margin-top:1rem;
    }
    .story-controls button{
      margin:0 0.5rem;
      padding:0.5rem 1.2rem;
      font-size:1rem;
      line-height:1.2;
      border:1px solid #ccc;
      border-radius:5px;
      background:#f5f5f5;
      cursor:pointer;
      transition:all .2s ease;
      box-sizing:border-box;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
    }
    .story-controls button:hover{
      background:#e0e0e0;
      border-color:#999;
    }
  </style>
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
  <div class="aui-pull-left aui-btn" onclick="close_winMain();">
    <span class="aui-iconfont aui-icon-left"></span>返回
  </div>
  <div class="aui-title">场景-高级-情境情绪应对</div>
</header>

<div class="aui-grid downBody">
  <div class="aui-row">
    <div class="aui-col-xs-2"></div>
    <div class="aui-col-xs-8">
      <div class="ImgStyleOne">
        <img id="imgOne" src="http://172.16.32.194/social/advanced/情境情绪应对/1/1.png" alt="">
      </div>
      <!-- 图片下方按钮：不会覆盖图片 -->
      <div class="story-controls">
        <button onclick="prevStory()">上一张</button>
        <button onclick="pauseAudio()">暂停</button>
        <button onclick="replayAudio()">重播</button>
        <button onclick="nextStory()">下一张</button>
      </div>
    </div>
  </div>
</div>

<div class="footbar">
  <p class="barLeft" onclick="toggleMenu()">第一关</p>
  <p class="barCenter">
    <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
      <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
    </div>
    <div id="InitialButton1" style="float:left;margin-left:4%;display:none;" onclick="ShowInitialClick()">
      <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
    </div>
    <div id="InitialButton2" style="float:left;margin-left:3%;display:none;">
      <img style="width:2rem;height:1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
    </div>
    <div id="InitialButton4" style="float:left;margin-left:4%;display:none;">
      <img style="width:2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt="" onclick="ResetClick()">
    </div>
  </p>
  <p class="barright">
    <img src="http://172.16.32.194/commonButton/回答问题.png" alt="" class="BarBottom" onclick="go_forward('RecognitionTwo');">
  </p>
</div>

<div class="menu" id="menu" style="display:none;">
  <div class="menu-item" onclick="goto_page(1)">第一关</div>
  <div class="menu-item" onclick="goto_page(2)">第二关</div>
  <div class="menu-item" onclick="goto_page(3)">第三关</div>
  <div class="menu-item" onclick="goto_page(4)">第四关</div>
  <div class="menu-item" onclick="goto_page(5)">第五关</div>
  <div class="menu-item" onclick="goto_page(6)">第六关</div>
  <div class="menu-item" onclick="goto_page(7)">第七关</div>
  <div class="menu-item" onclick="goto_page(8)">第八关</div>
  <div class="menu-item" onclick="goto_page(9)">第九关</div>
  <div class="menu-item" onclick="goto_page(10)">第十关</div>
</div>

<script>
  var token="", userid="", groupId="";
  var currentAudio=null;
  var currentIndex=0;
  var autoNextTimer=null; // ⭐ 自动切换的定时器 ID（用于可取消）

  var images=[
    "http://172.16.32.194/social/advanced/情境情绪应对/1/1.png",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/2.png",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/3.png",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/4.png"
  ];
  var audios=[
    "http://172.16.32.194/social/advanced/情境情绪应对/1/1.mp3",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/2.mp3",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/3.mp3",
    "http://172.16.32.194/social/advanced/情境情绪应对/1/4.mp3"
  ];

  apiready=function(){
    token=api.pageParam.token;
    userid=api.pageParam.uid;
    groupId=api.pageParam.groupId || "";
    playCurrentAudio(); // 进入页面即播放第一张
  };

  function setImage(){
    document.getElementById('imgOne').src = images[currentIndex];
  }

  function clearAutoNext(){
    if(autoNextTimer!==null){
      clearTimeout(autoNextTimer);
      autoNextTimer=null;
    }
  }

  function playCurrentAudio(){
    // 切换/重播前，清除可能存在的自动切换
    clearAutoNext();

    // 停掉旧音频
    if(currentAudio){
      currentAudio.pause();
      currentAudio=null;
    }

    setImage();
    currentAudio=new Audio(audios[currentIndex]);
    currentAudio.play();

    // 播放结束后，延迟 1 秒自动切到下一张（最后一张不切）
    currentAudio.onended=function(){
      if(currentIndex < images.length-1){
        autoNextTimer=setTimeout(function(){
          autoNextTimer=null; // 触发后清空
          nextStory();        // 这里会自动继续播放下一张
        },1000);
      }
    };
  }

  // 手动重播：也要取消可能存在的自动切换
  function replayAudio(){
    clearAutoNext();
    playCurrentAudio();
  }

  // 暂停：播放中则暂停；若已进入 1 秒等待期，则取消这次自动切换
  function pauseAudio(){
    if(currentAudio && !currentAudio.paused){
      currentAudio.pause();
    }
    // 即使音频已结束，也允许取消等待中的自动切换
    clearAutoNext();
  }

  function nextStory(){
    clearAutoNext();
    if(currentIndex < images.length-1){
      currentIndex++;
      playCurrentAudio();
    }
  }

  function prevStory(){
    clearAutoNext();
    if(currentIndex > 0){
      currentIndex--;
      playCurrentAudio();
    }
  }

  function toggleMenu(){
    var menu=document.getElementById("menu");
    menu.style.display=(menu.style.display==="none"||menu.style.display==="")?"block":"none";
  }

  function go_forward(data){
    // 离开前清理
    clearAutoNext();
    if(currentAudio){ currentAudio.pause(); currentAudio=null; }
    api.openWin({
      name:'Probrem1',
      url:'./Probrem1.html',
      pageParam:{ uid:userid, token:token, groupId:groupId },
      reload:true
    });
  }

  function goto_page(number){
    clearAutoNext();
    if(currentAudio){ currentAudio.pause(); currentAudio=null; }
    var pages=["Material1","Material2","Material3","Material4","Material5","Material6","Material7","Material8","Material9","Material10"];
    var name=pages[number-1];
    var url="../"+name+"/Story1.html";
    api.openWin({
      name:name,
      url:url,
      pageParam:{ uid:userid, token:token, groupId:groupId },
      reload:true
    });
  }
</script>
</body>
</html>
